<template>
  <view class="container">
    <uv-vtabs :chain="chain" keyName="cate_name" :barItemActiveStyle="{color:'#F86F03'}"
      :barItemActiveLineStyle="{background: '#F86F03'}" :list="list" :barItemBadgeStyle="{right:'20px',top:'12px'}"
      @change="change">
      <uv-vtabs-item>
        <view style="padding: 0 18rpx;box-sizing: border-box;">
          <view class="item" v-for="(item2,index2) in list2" :key="index2" @click="toDetail(item2)">
            <image class="item-pic" :src="item2.image" mode=""></image>
            <view class="linner">
              <view class="item-title text-twoline-ellipsis">{{item2.store_name}}</view>
              <view class="item-price">
                {{item2.price}}
              </view>
            </view>
          </view>
        </view>
      </uv-vtabs-item>
    </uv-vtabs>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        list: [
        ],
        list2: [],
        chain: false,
        value: 0,
      }
    },
    onLoad(option) {
      this.getList();
    },
    methods: {
      change(index) {
        console.log('选项改变：', index)
        this.value = index;
        this.getGoodsList();
      },
      getList() {
        reqApi.categoryList({}).then(res => {
          console.log("商品分类", res);
          this.list = res.data;
          this.getGoodsList();
        })
      },
      getGoodsList(){
        reqApi.categoryprotList({selectId: this.list[this.value].id}).then(res=>{
          this.list2 = res.data;
        })
      },
      toDetail(item){
        uni.navigateTo({
          url: `/pages/home/goodsDetail?id=${item.id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .item{
      display: flex;
      padding: 28rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #eee;
      .item-pic{
        width: 200rpx;
        height: 200rpx;
        margin-right: 28rpx;
      }
      .linner{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        .item-title{
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }
        .item-price{
          font-weight: 500;
          font-size: 36rpx;
          color: #EE1B1B;
        }
      }
    }
  }
</style>